<template>
  <view class="help-center">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <input type="text" placeholder="搜索帮助内容" class="search-input" />
      <text class="search-icon">🔍</text>
    </view>

    <!-- 主要内容区域 -->
    <view class="content-container">
      <!-- 进货管理 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">进货管理</text>
          <text class="section-arrow">></text>
        </view>
        <view class="section-content">
          <view class="item" @tap="navigateToDetail('inventory')">
            <text class="item-title">总部进货流程</text>
            <text class="item-desc">了解如何通过总部系统进行进货</text>
          </view>
          <view class="item" @tap="navigateToDetail('supplier')">
            <text class="item-title">供应商管理</text>
            <text class="item-desc">查看和管理供应商信息</text>
          </view>
        </view>
      </view>

      <!-- 技术指导 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">技术指导</text>
          <text class="section-arrow">></text>
        </view>
        <view class="section-content">
          <view class="item" @tap="navigateToDetail('operation')">
            <text class="item-title">运营指南</text>
            <text class="item-desc">店铺日常运营操作指南</text>
          </view>
          <view class="item" @tap="navigateToDetail('equipment')">
            <text class="item-title">设备维护</text>
            <text class="item-desc">设备使用和维护说明</text>
          </view>
        </view>
      </view>

      <!-- 经营资料 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">经营资料</text>
          <text class="section-arrow">></text>
        </view>
        <view class="section-content">
          <view class="item" @tap="navigateToDetail('manual')">
            <text class="item-title">经营手册</text>
            <text class="item-desc">完整的经营指导手册</text>
          </view>
          <view class="item" @tap="navigateToDetail('training')">
            <text class="item-title">培训资料</text>
            <text class="item-desc">员工培训相关文档</text>
          </view>
        </view>
      </view>

      <!-- 常见问题 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">常见问题</text>
          <text class="section-arrow">></text>
        </view>
        <view class="section-content">
          <view class="item" @tap="navigateToDetail('faq')">
            <text class="item-title">FAQ</text>
            <text class="item-desc">常见问题解答</text>
          </view>
          <view class="item" @tap="navigateToDetail('contact')">
            <text class="item-title">联系支持</text>
            <text class="item-desc">获取更多帮助</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '帮助中心'
    }
  },
  methods: {
    navigateToDetail(type) {
      // 根据不同类型跳转到不同的详情页
      uni.navigateTo({
        url: '/src/pages/home/help-detail?type=' + type
      })
    }
  }
}
</script>

<style>
.help-center {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 20rpx;
}

.search-bar {
  position: relative;
  margin: 20rpx 0;
  padding: 0 20rpx;
}

.search-input {
  background-color: #ffffff;
  height: 80rpx;
  border-radius: 40rpx;
  padding: 0 80rpx 0 40rpx;
  font-size: 28rpx;
}

.search-icon {
  position: absolute;
  right: 60rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.content-container {
  margin-top: 20rpx;
}

.section {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.section-header {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.section-arrow {
  color: #999;
  font-size: 32rpx;
}

.section-content {
  padding: 20rpx 30rpx;
}

.item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.item:last-child {
  border-bottom: none;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.item-desc {
  font-size: 24rpx;
  color: #999;
  display: block;
}
</style> 